<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="top_header_left">
        <el-select v-model="channels.status" placeholder="当前赛季" clearable class="filter-item"
          style="width: 200px; margin-right: 20px">
          <el-option v-for="item in calendarTypeOptions1" :key="item.id" :label="item.title"
            :value="item.activity_name" />
        </el-select>
        <el-select v-model="channels.status2" placeholder="当前阶段" clearable class="filter-item"
          style="width: 200px; margin-right: 20px">
          <el-option v-for="item in calendarTypeOptions2" :key="item.id" :label="item.step_name" :value="item.step" />
        </el-select>

        <el-input v-model="channels.perfect_number" placeholder="歌手ID" style="width:200px;margin-right: 20px" />

        <el-select v-model="channels.status3" placeholder="排名" clearable class="filter-item"
          style="width: 200px; margin-right: 20px">
          <el-option v-for="item in calendarTypeOptions3" :key="item.id" :label="item.nickname" :value="item.id" />
        </el-select>
        <el-button class="filter-item" type="button" icon="el-icon-search" @click="
         channels.page = 1;handleFilter();">
          搜索
        </el-button>
      </div>

      <div class="top_header_right">
        <el-button class="filter-item" type="primary" style="margin-left: 20px" @click="ScoreUpdate">
          更新投票分数
        </el-button>
        <el-button class="filter-item" type="primary" style="margin-left: 20px" @click="ScoreUpdate2">
          更新礼物分数
        </el-button>
        <el-button class="filter-item" type="primary" style="margin-left: 20px" @click="ScoreUpdate3">
          更新总分数
        </el-button>
        <el-button class="filter-item" type="primary" style="margin-left: 20px"
          @click="dialogFormVisible1 = true;nth=1">
          添加
        </el-button>
      </div>
    </div>

    <el-table ref="multipleTable" :data="list" stripe style="width: 1600px" border>
      <el-table-column prop="nickname" label="选手名称" width="180" align="center" :show-overflow-tooltip='true'>
        <template align="center" slot-scope="scope">
          <span>{{scope.row.nickname}} ({{scope.row.perfect_number}})</span>
        </template>
      </el-table-column>
      <el-table-column prop="step_name" label="所属赛季所属阶段" width="150" align="center" />
      <el-table-column prop="song_url" label="歌曲" align="center" width="400">
        <template align="center" slot-scope="scope">
          <audio ref="audio" :src="scope.row.song_url" controls="controls" style="width:100%" @pause="onPause"
            @play="onPlay" @timeupdate="onTimeupdate" @loadedmetadata="onLoadedmetadata" />
        </template>
      </el-table-column>
      <el-table-column prop="song_name" label="歌曲名称" align="center" width="150" :show-overflow-tooltip='true' />
      <el-table-column prop="vote_num" label="投票数" align="center" />
      <el-table-column prop="vote_score" label="投票得分" align="center" />
      <el-table-column prop="official_score" label="官方得分" align="center" />
      <el-table-column prop="guest_score" label="嘉宾得分" align="center" />
      <el-table-column prop="gift_score" label="礼物得分" align="center" />
      <el-table-column prop="total_score" label="总得分" align="center" />
      <el-table-column fixed="right" label="操作" width="150" align="center">
        <template slot-scope="scope" align="center">
          <el-button type="button" size="small" @click="dialogFormVisible1 = true;nth=2;score = scope.row">
            评分
          </el-button>
          <el-button type="button" size="small" @click="score_Promotion(scope.row.id)">
            晋级
          </el-button>
        </template>
      </el-table-column>

    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="channels.page" :limit.sync="channels.pageSize"
      @pagination="handleFilter" />

    <el-dialog :title="nth==1?'添加歌手':'评分'" :visible.sync="dialogFormVisible1" style="width:800px;margin:0 auto;"
      class="model_">
      <div class="center_lisr" v-if="nth==1">
        <div>
          <span>选手ID</span>
          <el-input v-model="user_list.perfect_number" placeholder="输入用户ID" style="width:300px;max-width:70%;" />
        </div>
        <div>
          <span>赛季代码</span>
          <el-select v-model="user_list.activity_name" placeholder="赛季代码" clearable class="filter-item"
            style="width:300px;max-width:70%;">
            <el-option v-for="item in calendarTypeOptions1" :key="item.id" :label="item.title"
              :value="item.activity_name" />
          </el-select>
        </div>
        <div>
          <span>歌曲</span>
          <el-upload class="upload-demo" action="http://testadmin-api.xunyinjiaoyou.com/admin/voiceUpload"
            :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="1" :on-exceed="handleExceed"
            :file-list="fileList" :http-request="uploadFile" ref="upload">
            <el-button size="small" type="primary" :loading="loading">{{loading?"上传中":"点击上传"}}<i
                class="el-icon-upload el-icon--right"></i></el-button>
          </el-upload>
        </div>
        <div>
          <el-button class="filter-item" type="primary" style="margin:20px auto 0;width:80%" @click="Add_singer">
            创建
          </el-button>
        </div>
      </div>
      <div class="center_lisr" v-else>
        <div>
          <span>礼物分数</span>
          <el-input v-model="score.gift_score" placeholder="输入歌手分数" style="width:300px;max-width:70%;" disabled />
        </div>
        <div>
          <span>投票分数</span>
          <el-input v-model="score.vote_num" placeholder="输入投票分数" style="width:300px;max-width:70%;" disabled />
        </div>
        <div>
          <span>官方评分</span>
          <el-input v-model="score.official_score" placeholder="输入官方评分" style="width:300px;max-width:70%;" />
        </div>
        <div>
          <span>嘉宾得分</span>
          <el-input v-model="score.guest_score" placeholder="输入嘉宾得分" style="width:300px;max-width:70%;" />
        </div>
        <div>
          <el-button class="filter-item" type="primary" icon="el-icon-search" style="margin-left: auto"
            @click="score_Entry">
            保存
          </el-button>
        </div>
      </div>
    </el-dialog>

  </div>
</template>
<script>
  import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
  import {
    encryption2
  } from "@/api/index";
  export default {
    name: "ComplexTable",
    components: {
      Pagination,
    },
    data() {
      return {
        loading: false,
        fileList: [],
        addForm: {
          path: '',
        },
        nth: 1, //1上传歌手信息2评分
        channels: {
          status: '', // 
          status2: '', // 
          status3: 1, //1按分数
          perfect_number: '', //歌手ID
          page: 1,
          pageSize: 10,
        },
        user_list: {
          perfect_number: '',
          activity_name: '',
          song_url: '', //歌曲url
          song_name: '', //歌曲名称
        }, //添加歌手信息
        score: {},
        calendarTypeOptions1: [],
        calendarTypeOptions2: [],
        calendarTypeOptions3: [{
            id: 1,
            nickname: "按分数",
          },
          {
            id: 2,
            nickname: "按票数",
          },
        ],
        total: 0,
        list: [],
        dialogFormVisible1: false,
        formLabelWidth: '100px',
        userId: '',
        audio: {},


      };
    },
    created() {
      this.handleFilter();
      this.goodVoiceList();
    },
    watch: {
      'channels.status': {
        handler(newName, oldName) {
          console.log(newName);
          if (newName) {
            this.channels.status = newName;
            this.channels.status2 = '';
            this.goodVoiceStepList();
          } else {
            this.channels.status2 = '';
          }
        },
        deep: true
      }
    },
    methods: {
      handleRemove(file, fileList) {

        console.log(file, fileList);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 1 个文件`);
        // this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
      uploadFile(param) {
        var that = this; //避免this指针在后面的请求以后改变
        that.loading = true;
        var fileObj = param.file;
        // this.uploadAction是接收上传文件的后台地址
        var FileController = "http://testadmin-api.xunyinjiaoyou.com/admin/voiceUpload";
        // FormData 对象
        var forms = new FormData();
        // 文件对象
        forms.append("adminId", '1');
        forms.append("voice_file", fileObj);
        // XMLHttpRequest 对象
        var xhr = new XMLHttpRequest();
        xhr.open("post", FileController, true);
        xhr.onload = function () {
          var strData = xhr.response; //回传的数据接受
          var jsonData = JSON.parse(strData); //这里由于后端接口返回的是String，而后面需要的是json

          if (jsonData.status == 0) {
            that.user_list.song_url = jsonData.result; //歌曲url
            that.user_list.song_name = fileObj.name; //歌曲名称
            that.loading = false;
          } else {
            that.$message({
              message: jsonData.text,
              type: "error",
            });
            that.$refs.upload.clearFiles()
             that.loading = false;
          }
        };
        xhr.send(forms);
      },
      // 当音频播放
      onPlay() {
        this.audio.playing = true
      },
      // 当音频暂停
      onPause() {
        this.audio.playing = false
      },
      // 当timeupdate事件大概每秒一次，用来更新音频流的当前播放时间
      onTimeupdate(res) {
        this.audio.currentTime = res.target.currentTime
      },
      // 当加载语音流元数据完成后，会触发该事件的回调函数
      // 语音元数据主要是语音的长度之类的数据
      onLoadedmetadata(res) {
        this.audio.maxTime = parseInt(res.target.duration)
      },

      // 查询
      handleFilter() {
        const arys = {
          activity_name: this.channels.status,
          step: this.channels.status2,
          sort: this.channels.status3,
          perfect_number: this.channels.perfect_number,
          page: this.channels.page,
          pageSize: this.channels.pageSize,
        };
        const url = "/activity/goodVoiceSingerList";
        encryption2(arys, url).then((res) => {
          if (res.data.status === 0) {
            this.list = res.data.result.list;
            this.total = res.data.result.total;
          } else {
            this.$message({
              message: res.data.text,
              type: "error",
            });
          }
        });
      },
      goodVoiceList() {
        const arys = {};
        const url = "/activity/goodVoiceList";
        encryption2(arys, url).then((res) => {
          if (res.data.status === 0) {
            this.calendarTypeOptions1 = res.data.result.list;
          } else {
            this.$message({
              message: res.data.text,
              type: "error",
            });
          }
        });
      },
      goodVoiceStepList() {
        const arys = {
          activity_name: this.channels.status,
        };
        const url = "/activity/goodVoiceStepList";
        encryption2(arys, url).then((res) => {
          if (res.data.status === 0) {
            this.calendarTypeOptions2 = res.data.result.list;
          } else {
            this.$message({
              message: res.data.text,
              type: "error",
            });
          }
        });
      },
      //投票更新
      ScoreUpdate() {
        if (!this.channels.status || !this.channels.status2) {
          return this.$message('请选择当前赛季和赛季阶段')
        }
        const arys = {
          activity_name: this.channels.status,
          step: this.channels.status2,
        };
        const url = "/activity/goodVoiceVoteScoreUpdate";
        encryption2(arys, url).then((res) => {
          if (res.data.status === 0) {
            this.handleFilter()
            this.$message({
              message: res.data.text,
              type: "success",
            });
          } else {
            this.$message({
              message: res.data.text,
              type: "error",
            });
          }
        });
      },
      //礼物更新
      ScoreUpdate2() {
        if (!this.channels.status || !this.channels.status2) {
          return this.$message('请选择当前赛季和赛季阶段')
        }
        const arys = {
          activity_name: this.channels.status,
          step: this.channels.status2,
        };
        const url = "/activity/goodVoiceGiftScoreUpdate";
        encryption2(arys, url).then((res) => {
          if (res.data.status === 0) {
            this.handleFilter()
            this.$message({
              message: res.data.text,
              type: "success",
            });
          } else {
            this.$message({
              message: res.data.text,
              type: "error",
            });
          }
        });
      },
      ScoreUpdate3() {
        if (!this.channels.status || !this.channels.status2) {
          return this.$message('请选择当前赛季和赛季阶段')
        }
        const arys = {
          activity_name: this.channels.status,
          step: this.channels.status2,
        };
        const url = "/activity/goodVoiceTotalScoreUpdate";
        encryption2(arys, url).then((res) => {
          if (res.data.status === 0) {
            this.handleFilter()
            this.$message({
              message: res.data.text,
              type: "success",
            });
          } else {
            this.$message({
              message: res.data.text,
              type: "error",
            });
          }
        });
      },
      //添加歌手
      Add_singer() {
        if (!this.user_list.perfect_number || !this.user_list.activity_name) {
          return this.$message('请输入选手ID或赛季代码')
        }
        if (!this.user_list.song_name || !this.user_list.song_url) {
          return this.$message(this.loading ? '音频正在上传中,请不要退出操作' : '请上传选手参数作品')
        }
        const arys = {
          activity_name: this.user_list.activity_name,
          perfect_number: this.user_list.perfect_number,
          song_name: this.user_list.song_name,
          song_url: this.user_list.song_url,
        };
        const url = "/activity/goodVoiceSingerAdd";
        encryption2(arys, url).then((res) => {
          if (res.data.status === 0) {
            this.handleFilter()
            this.user_list = {},
              this.$refs.upload.clearFiles()
            this.dialogFormVisible1 = false,
              this.$message({
                message: res.data.text,
                type: "success",
              });
          } else {
            this.$message({
              message: res.data.text,
              type: "error",
            });
          }
        });
      },
      // 评分
      score_Entry() {
        const arys = {
          id: this.score.id,
          official_score: this.score.official_score,
          guest_score: this.score.guest_score,
        };
        const url = "/activity/goodVoiceScoreInput";
        encryption2(arys, url).then((res) => {
          if (res.data.status === 0) {
            this.handleFilter()
            this.score = {},
              this.dialogFormVisible1 = false,
              this.$message({
                message: res.data.text,
                type: "success",
              });
          } else {
            this.$message({
              message: res.data.text,
              type: "error",
            });
          }
        });
      },
      // 晋级
      score_Promotion(id) {
        const arys = {
          id: id,
        };
        const url = "/activity/goodVoiceSingerPromotion";
        encryption2(arys, url).then((res) => {
          if (res.data.status === 0) {
            this.handleFilter()
            this.dialogFormVisible1 = false,
              this.$message({
                message: res.data.text,
                type: "success",
              });
          } else {
            this.$message({
              message: res.data.text,
              type: "error",
            });
          }
        });
      },
    },
  };
</script>
<style scoped>
  .filter-container .filter-item {
    margin-bottom: 0;
  }

  .el-table--border {
    border-right: 1px solid #dfe6ec;
  }

  .el-alert {
    width: 1200px;
  }

  .filter-container {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 1600px;
  }


  .batch .filter-item {
    margin-left: 20px;
  }

  .el-dialog {
    width: 300px;
    height: 300px;
  }

  .center_lisr {
    width: 96%;
    height: 80%;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;


  }

  .center_lisr>div {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
  }

  .center_lisr>div>el-input {
    flex: 1;
    margin-left: 20px;
  }

  .model_ /deep/ .el-dialog__body {
    padding-top: 0%;
  }

  .model_ /deep/ .el-button--mini {
    padding: 10px 20px;
  }

  .model_ /deep/ .el-dialog {
    border-radius: 4px;
  }
</style>